<template>
	<view class="content">
		<scroll-view scroll-y="true" style="height: 400px;">
			<view style="background-color: white;" >
				<!-- 照片 -->
				<van-image class="image" width="100" height="100" src="https://img.yzcdn.cn/vant/cat.jpeg" />
				<!-- 标题 -->
				<view style="align-items:center;font-size: 20px;font-weight: normal;margin-top: 10px;">
					{{activity.headline}}
				</view>
				<!-- 票价 -->
				<view style="font-size: 20px;color: #4CD964;font-weight: normal;margin-top: 10px;">
					¥：{{minTicket}} - {{maxTicket}}
				</view>
				<!-- 时间和地址 -->
				<view style="font-size: 13px;font-weight: normal;margin-top: 10px;">
					<van-icon name="underway-o" />
					<span style="font-size: 16px;" >活动时间：</span>{{activity.beginTime}}
					<van-icon style="float: right;" name="calendar-o" />
				</view>
				<view style="margin-top: 10px;">
					<van-icon name="location-o" />
					<span style="font-size: 16px;">活动地址：</span>{{activity.address}}
				</view>
			</view>
			<!-- 嘉宾 -->
			<view style="background-color: white;margin-top: 10px;font-size: 16px;" >活动嘉宾</view>
			<view v-for=" item in guest" :key="item.id">
				<van-card :desc="item.summary" :title="item.name" thumb="https://img01.yzcdn.cn/vant/tree.jpg">
				</van-card>
			</view>
			<!-- 详情 -->
			<view style="background-color: white;margin-top: 10px;font-size: 16px;">活动详情<view style="font-size: 13px;">{{activity.context}}</view>
			</view>
		</scroll-view>
		<!-- 导航栏 -->
		<view>
			<!-- 弹出框 -->
			<van-dialog id="van-dialog" />
			<van-goods-action>
				<van-goods-action-icon icon="todo-list-o" text="主办方" @click="onClickIcon" />
				<van-goods-action-icon :icon="Icon" text="收藏" @click="onClickIconCollection(IconNum)" />
				<van-goods-action-button color="#45b97c" type="danger" text="立即报名" @click="toVote" />
			</van-goods-action>
		</view>
	</view>
</template>

<script>
	import Dialog from "../../wxcomponents/vant/dist/dialog/dialog"
	export default {
		data() {
			return {
				Icon: 'like-o',
				IconNum: false,
				title: 'Hello',
				activityId: 1,
				userId: 2,
				activity: {
					address: '',
					beginTime: '',
					context: '',
					createTime: '',
					creator: '',
					endTime: '',
					expire: '',
					headline: '',
					id: '',
					label: '',
					peopleNum: '',
					plate: '',
					poster: "",
					publisherId: '',
					recommend: '',
					spotlight: '',
					type: '',
					updateTime: '',
					updater: ''
				},
				guest: [],
				ticket: [],
				maxTicket: 0,
				minTicket: 0,
				Collection: '',
				userActivity: {
					uid: '',
					aid: ''
				}
			}
		},
		onLoad(option) {
			var options = option.id
			this.activityId = options
		},
		created() {
			this.findActivityData()
			this.findGuest()
			this.findTicket()
			this.findUid()
		},
		watch: {
		        Icon: function(newVal, oldVal) {
		            console.log("newVal:", newVal);
		            console.log("oldVal:", oldVal);
		        }
		},
		methods: {
			// 收藏
			onClickIconCollection(e){
				// e=true?this.Icon='like':this.Icon='like-o'
				if(e == false){
					this.Icon = 'like'
					this.changeCollection()
					Dialog.alert({
						message: '已收藏',
					}).then(() => {
						this.content = 0
					});
				}else{
					this.Icon = 'like-o'
					this.changeCollection()
					Dialog.alert({
						message: '已取消收藏',
					}).then(() => {
						this.content = 0
					});
				}
				this.IconNum = !e
			},
			// 收藏活动
			changeCollection(e) {
				this.userActivity.uid = this.userId
				this.userActivity.aid = this.activityId
				uni.request({
					url: 'http://localhost:8084/user/followactivity',
					method: "post",
					data: this.userActivity,
					success: (res) => {
						this.Collection = res.data.data
					}
					})
			},
			// 活动详情
			findActivityData(e) {
				uni.request({
					url: 'http://localhost:8083/activity/' + this.activityId,
					method: "GET",
					success: (res) => {
						this.activity = res.data.data
					}
				})
			},
			// 获取当前Uid
			findUid(e) {
				uni.request({
					url: 'http://localhost:8085/partActivite/getUid',
					method: "GET",
					success: (res) => {
						this.userId = res.data.data
					}
				})
			},
			// 嘉宾
			findGuest(e) {
				uni.request({
					url: 'http://localhost:8083/guest/activity/' + this.activityId,
					method: "GET",
					success: (res) => {
						this.guest = res.data.data
					}
				})
			},
			// 票价
			findTicket(e) {
				uni.request({
					url: 'http://localhost:8083/activity/ticket/' + this.activityId,
					method: "GET",
					success: (res) => {
						console.log(res.data.data);
						this.ticket = res.data.data
						for (let num = 0; num < this.ticket.length; num++) {
							if (this.minTicket > this.ticket[num].price) {
								this.minTicket = this.ticket[num].price
							}
							if (this.maxTicket < this.ticket[num].price) {
								this.maxTicket = this.ticket[num].price
							}
						}
					}
				})
			},
			// 主办方
			onClickIcon() {
				console.log('主办方');
			},
			// 收藏
			onClickButton() {
				console.log('收藏按钮确认');
			},
			// 报名转下一页
			toVote(e) {
				const activityId = this.activityId
				uni.navigateTo({
					// url:"/pages/applicationForm/vote?activityId="+activityId
					url: "/pages/applicationForm/vote?activity=" + encodeURIComponent(JSON.stringify(this
							.activity)) +
						"&userId=" + this.userId,
				})
			}
		}
	}
</script>
<style>
	.content {
		display: flex;
		flex-direction: column;
		background-color: #efefef;

	}

	.image {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
